<template>
  <div class="editlnfo">
    <hm-nav-bar
      :title="titleObj[type]"
      :path="path"
      :right="right"
      @rightClick="save"
      class="baocun"
    ></hm-nav-bar>

    <div class="content">
      <van-field v-model="inputValue" class="color" v-if="type !== 'avatar'">
      </van-field>
      <van-uploader
        v-else
        v-model="list"
        max-count="1"
        :before-read="beforeRead"
        :after-read="afterRead"
        @delete="deleteEvent"
      ></van-uploader>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { auEdit, upload } from '@/api/my.js'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      inputValue: '',
      right: '', // 保存
      path: '/home/mylnfo', // 导航栏左边箭头跳转页面
      type: this.$route.query.type, // 接收路由传参字段名

      // 定义标题对象
      titleObj: {
        nickname: '修改昵称',
        intro: '修改个人简介',
        position: '修改岗位',
        avatar: '修改头像'
      },
      list: []
    }
  },

  // 监听
  watch: {
    inputValue (newVal) {
      if (newVal !== this.userInfo[this.type] && newVal !== '') {
        this.right = '保存'
      } else {
        this.right = ''
      }
    }
  },

  methods: {
    save () {
      if (this.right === '') {
        return
      }
      this.editlnfo({
        [this.type]: this.inputValue
      })
    },
    // 编辑用户信息
    editlnfo (obj) {
      this.$toast.loading({
        duration: 0
      })
      auEdit(obj).then(() => {
        this.$toast.success('修改资料成功')
        this.$router.push(this.path)
        // 更新vuex中的userlnfo
        this.$store.dispatch('refreshUserInfo')
      })
    },

    // 上传头像 这是上传前
    beforeRead (file) {
      const isImg = file.type === 'image/png'
      const ismit2M = file.size / 1024 / 1021 < 2
      if (!isImg) {
        this.$toast.fail('请上传PNG格式图片')
      }
      if (!ismit2M) {
        this.$toast.fail('请上传2M以内的图片')
      }
      return isImg && ismit2M
    },
    // 读取后
    afterRead (res) {
      // 上传头像到服务器
      const formData = new FormData()
      formData.append('files', res.file)
      this.$toast.loading({
        duration: 0
      })
      upload(formData).then(res => {
        this.$toast.success('上传成功')
        console.log(res)
        this.inputValue = res.data.data[0].id
      })
    },
    // 删除事件
    deleteEvent () {
      //  删除时，就不显示保存按钮
      this.inputValue = ''
    }
  },

  created () {
    // 如果有头像 list:[{url:图像地址}]
    // 如果没有就不管
    if (this.userInfo.avatar) {
      this.list[0] = { url: process.env.VUE_APP_URL + this.userInfo.avatar }
    }

    this.inputValue = this.userInfo[this.type]
    if (this.type === 'position') {
      this.path = '/home/my'
    }
  }
}
</script>

<style lang="less" scoped>
.editlnfo {
  .baocun {
    padding-right: 10px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: right;
    color: #181a39;
    line-height: 20px;
    letter-spacing: 0px;
  }
  .content {
    .color {
      background-color: #f7f4f5;
      margin-top: 20px;
      display: flex;
    }
  }
}
</style>
